<template>
  <div>
    <div v-for="(item, index) in data" :key="index">
      <a-row v-if="item.type == 'input'">
        <a-col :span="2" style="line-height: 30px">
          {{ item.name }}
        </a-col>
        <a-col :span="12">
          <a-input placeholder="请输入" v-model="data[index].value" />
        </a-col>
      </a-row>
      <a-row v-if="item.type == 'text'">
        <a-col :span="2" style="line-height: 30px">
          {{ item.name }}
        </a-col>
        <a-col :span="12">
          <a-textarea
            placeholder="请输入"
            :rows="4"
            v-model="data[index].value"
          />
        </a-col>
      </a-row>
      <a-row v-if="item.type == 'time'">
        <a-col :span="2" style="line-height: 30px">
          {{ item.name }}
        </a-col>
        <a-col :span="12">
          <a-time-picker
            v-model="item.value"
            value-format="HH:mm:ss"
            format="HH:mm:ss"
            :default-open-value="moment('00:00:00', 'HH:mm:ss')"
            @change="(date, dateString) => createTime(date, dateString, index)"
          />
        </a-col>
      </a-row>
      <a-row v-if="item.type == 'date'">
        <a-col :span="2" style="line-height: 30px">
          {{ item.name }}
        </a-col>
        <a-col :span="12">
          <a-date-picker
            v-model="item.value"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            @change="(date, dateString) => createDate(date, dateString, index)"
          />
        </a-col>
      </a-row>
      <a-row v-if="item.type == 'file'">
        <a-col :span="2" style="line-height: 30px">{{ item.name }}</a-col>
        <a-col :span="12" style="display: flex">
          <Upload
            :isFile="true"
            accept=".zip,.doc,.docx,.excel,.xlsx,.pdf,.rar"
            :imageUrl="item.value"
            @getImg="getImgFile($event, index)"
          ></Upload>
        </a-col>
      </a-row>
      <a-row v-if="item.type == 'img'">
        <a-col :span="2" style="line-height: 30px">{{ item.name }}</a-col>
        <a-col :span="12" style="display: flex">
          <Upload
            accept=".jpg,.png,.jpeg"
            :imageUrl="item.value"
            @getImg="getImgW($event, index)"
          ></Upload>
        </a-col>
      </a-row>
    </div>
    <a-row>
      <a-button style="float: right" type="primary" @click="saveData()">
        提交
      </a-button>
    </a-row>
  </div>
</template>

<script>
import moment from "moment";
import Upload from "@/component/upload/index.vue";
export default {
  components: {
    Upload,
  },
  props: ["tableData", "tableId"],
  data() {
    return {
      data: [],
      fileList: [],
      imgList: [],
      file: {},
      sign: "",
    };
  },
  mounted() {
    var type = this.tableData.dataRowType.split(",");
    var name = this.tableData.dataRow.split(",");
    var value;
    if (this.tableData.dataColValue) {
      value = this.tableData.dataColValue.split(",");
    } else {
      value = [];
    }
    for (let i = 0; i < type.length; i++) {
      if (value[i]) {
        this.data.push({
          type: type[i],
          name: name[i],
          value: value[i],
        });
      } else {
        this.data.push({
          type: type[i],
          name: name[i],
          value: "",
        });
      }
    }
  },
  methods: {
    moment,
    getImgFile(e, index) {
      this.data[index].value = e;
    },
    getImgW(e, index) {
      this.data[index].value = e;
    },
    createTime(date, dateString, e) {
      this.data[e].value = dateString;
    },
    createDate(date, dateString, e) {
      this.data[e].value = dateString;
    },
    handleFileUpload(event, _) {
      this.file = event;
      this.fileList.push(event);
    },
    handleImgUpload(event, _) {
      this.file = event;
      this.imgList.push(event);
    },
    submitFile() {
      const query = {
        multipartFile: this.file,
      };
      this.$axios
        .post("/government-platform-center/common/uploadFile", query, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((response) => {
          if (response.data.code == 200) {
            this.$message.success("上传成功");
            this.data[this.sign].value = response.data.data;
          }
        });
    },
    changeSign(index) {
      this.sign = index;
    },
    saveData() {
      var dataColValue = [];
      for (let i = 0; i < this.data.length; i++) {
        dataColValue.push(this.data[i].value);
      }

      var query = {
        dataColValue: "" + dataColValue + "",
        id: this.tableData.id,
      };

      this.$axios
        .post("/government-platform-center/heritageZoneTable/edit", query, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((response) => {
          this.$message.success("保存成功");
        });
    },
    downloadData(e) {
      window.open(e);
    },
  },
};
</script>
<style scoped>
.ant-row {
  margin: 20px;
}
</style>
